<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Accordion(折叠面板)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<style>
.ColorPalette{height:35px;
line-height:35px;
text-align:center;}
.GridShow .Row{margin-bottom:10px;}
.GridShow [class^=Col]{line-height:20px;padding:5px;margin-bottom:5px}
</style>
</head>
<body >
<div>
   <div class="HelpBox" id="WrapperArea">
   
	<h2>$$.initAccordion()</h2>
		<h3>概述</h3>
		<div class="desc">
		<p>手风琴布局／可折叠布局（Accordion / Collapsible）</p>
		<p>在元素load完成后，初始化：$$.initAccordion()</p>
	</div>
	<div class="example">
        <h4>通常，手风琴布局可以这样实现:</h4>
		<pre><code>&lt;div class="AccordionList">
    &lt;div class="AccordionItem">
        &lt;div class="AccordionItemToggle">...&lt;/div>
        &lt;div class="AccordionItemContent">...&lt;/div>
    &lt;/div>
    &lt;div class="AccordionItem AccordionItemExpanded">
        &lt;div class="AccordionItemToggle">...&lt;/div>
        &lt;div class="AccordionItemContent">...&lt;/div>
    &lt;/div>
    &lt;div class="AccordionItem">
        &lt;div class="AccordionItemToggle">...&lt;/div>
        &lt;div class="AccordionItemContent">...&lt;/div>
    &lt;/div>
    ...
&lt;/div></code></pre>
		<ul class="List">
			<li>AccordionList  - 多个手风琴元素的列表. 可选</li>
			<li>AccordionItem  - 单个手风琴元素. 必选</li>
			<li>AccordionItemToggle  - 用来展开／折叠手风琴元素内容的开关. 必选</li>
			<li>AccordionItemContent  - 隐藏的手风琴元素的内容. 必选</li>
			<li>AccordionItemExpanded  - 展开的手风琴元素</li>
		</ul>
        <h3>实例</h3>
        <h4>折叠布局(Collapsible Layout):</h4>
		<p>如果你希望独立的可折叠元素，你可以不使用"AccordionList"包裹元素</p>
		<h5>HTML 代码:</h5>
        <pre><code>&lt;div class="AccordionItem">
    &lt;div class="AccordionItemToggle">...&lt;/div>
    &lt;div class="AccordionItemContent">...&lt;/div>
&lt;/div>

&lt;div class="AccordionItem">
    &lt;div class="AccordionItemToggle">...&lt;/div>
    &lt;div class="AccordionItemContent">...&lt;/div>
&lt;/div></code></pre>
        <h4>手风琴列表视图（Accordion List View）:</h4>
		<p>如果你希望给列表视图加上手风琴布局，你应该使用"ItemLink"元素而不是"AccordionItemToggle"元素:</p>
		<pre><code>&lt;div class="ListBlock AccordionList">
    &lt;ul>
        &lt;li class="ListItem AccordionItem">
            &lt;a href="" class="ItemLink ItemCon">
                &lt;div class="ItemInner">
                    &lt;div class="ItemTitle">Item 1&lt;/div>
                &lt;/div>
            &lt;/a>
            &lt;div class="AccordionItemContent">Item 1 content ...&lt;/div>
        &lt;/li>
        &lt;li class="ListItem AccordionItem">
            &lt;a href="" class="ItemLink ItemCon">
                &lt;div class="ItemInner">
                    &lt;div class="ItemTitle">Item 2&lt;/div>
                &lt;/div>
            &lt;/a>
            &lt;div class="AccordionItemContent">Item 2 content ...&lt;/div>
        &lt;/li>
    &lt;/ul>
&lt;/div>
</code></pre>
  	    <div class="ListBlock AccordionList" style="width:50%">
      <ul>
        <li class="AccordionItem ListItem AccordionItemExpanded">
		<a href="javascript:;" class="ItemLink ItemCon">
            <div class="ItemInner "> 
              <div class="ItemTitle">Lorem Ipsum</div>
            </div></a>
          <div class="AccordionItemCon">
            <div class="ContentBlock">
              <p>列表视图折叠面板内容区域，显示文本。</p>
            </div>
          </div>
        </li>
        <li class="AccordionItem ListItem"><a href="javascript:;" class="ItemLink ItemCon">
            <div class="ItemInner "> 
              <div class="ItemTitle">Nested List</div>
            </div></a>
			  <div class="AccordionItemCon">
				<div class="ListBlock">
				  <ul>
					<li class="ListItem">
					  <div class="ItemCon">
						<div class="ItemMedia"><img class="Icon" src="../../../images/svg/iconfont-shoucang.svg" alt="收藏"></div>
						<div class="ItemInner"> 
						  <div class="ItemTitle">Item 1</div>
						</div>
					  </div>
					</li>
					<li class="ListItem">
					  <div class="ItemCon">
						<div class="ItemMedia"><img class="Icon" src="../../../images/svg/iconfont-shoucang.svg" alt="收藏"></div>
						<div class="ItemInner"> 
						  <div class="ItemTitle">Item 2</div>
						</div>
					  </div>
					</li>
					<li class="ListItem">
					  <div class="ItemCon">
						<div class="ItemMedia"><img class="Icon" src="../../../images/svg/iconfont-shoucang.svg" alt="收藏"></div>
						<div class="ItemInner"> 
						  <div class="ItemTitle">Item 3</div>
						</div>
					  </div>
					</li>
					<li class="ListItem">
					  <div class="ItemCon">
						<div class="ItemMedia"><img class="Icon" src="../../../images/svg/iconfont-shoucang.svg" alt="收藏"></div>
						<div class="ItemInner"> 
						  <div class="ItemTitle">Item 4</div>
						</div>
					  </div>
					</li>
				  </ul>
				</div>
			  </div>
        </li>
        <li class="AccordionItem ListItem"><a href="javascript:;" class="ItemLink ItemCon">
            <div class="ItemInner"> 
              <div class="ItemTitle">Integer semper</div>
            </div></a>
          <div class="AccordionItemCon">
            <div class="ContentBlock">
              <p>列表视图折叠面板内容区域，显示文本。</p>
            </div>
          </div>
        </li>
      </ul>
    </div>

	<h4>手风琴组件有JavaScript API，你可以在JS中控制打开和关闭。方法说明如下</h4>
	<p>$$.accordionOpen(item) - 打开指定的条目</p>
	<ul class="List">
		<li>item - HTMLElement or string (想要操作的条目的CSS选择器 (&lt;div class="AccordionItem">). 必须。</li>
	</ul>

	<p>$$.accordionClose(item) - 关闭指定条目</p>
	<ul class="List">
		<li>item - HTMLElement or string (想要操作的条目的CSS选择器 (&lt;div class="AccordionItem">). 必须</li>
	</ul>

	<p>$$.accordionToggle(item) - toggle指定条目</p>
	<ul class="List">
		<li>item - HTMLElement or string (想要操作的条目的CSS选择器 (&lt;div class="AccordionItem">). 必须</li>
	</ul>
	<h4>事件</h4>
	<p>手风琴有这些事件</p>
	<table class="Table TableBor TableHover">

			<thead>
				<tr>
					<th>事件名称</th>
					<th>Target</th>
					<th>描述</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>open</td>
					<td>Accordion item
&lt;div class="AccordionItem"></td>
					<td>某一条目开始执行打开动画的时候会触发</td>
				</tr>
				<tr>
					<td>opened</td>
					<td>Accordion item
&lt;div class="AccordionItem"></td>
					<td>某一条目完成打开动画后触发</td>
				</tr>
				<tr>
					<td>close</td>
					<td>Accordion item
&lt;div class="AccordionItem"></td>
					<td>某一条目开始执行关闭动画的时候会触发</td>
				</tr>
				<tr>
					<td>closed</td>
					<td>Accordion item
&lt;div class="AccordionItem"></td>
					<td>某一条目完成关闭动画后触发</td>
				</tr>
			</tbody>
		</table>
	<pre><code>$$('.AccordionItem').on('opened', function () {
  $$.alert('Accordion item opened');
}); 
 
$$('.AccordionItem').on('closed', function (e) {
  $$.alert('Accordion item closed');
});
</code></pre>
   </div>

</div>
<script type="text/javascript" src="../../../script/kelat.js"></script>
<script type="text/javascript">
$$(document).ready(function(){
	$$.initAccordion()
});
</script>
</div>
</body>
</html>
